<template>
  <div>
    <div class="screen" style="width: 100%; height: 100%; background:#000;background-size: cover;">
    <div
      ref="sctterMap"
      style="
        width: 1200px;
        height: 1000px;
        z-index: 1; margin: auto;
      "
    ></div>
    </div>
    
  </div>
</template>

<script>
import echarts from "echarts";
import HN from "@/assets/json/460000.json";
import DZ from "@/assets/json/460400.json";
import WZS from "@/assets/json/469001.json";
import QH from "@/assets/json/469002.json";
import WC from "@/assets/json/469005.json";
import WN from "@/assets/json/469006.json";
import DF from "@/assets/json/469007.json";
import DA from "@/assets/json/469021.json";
import TC from "@/assets/json/469022.json";
import CM from "@/assets/json/469023.json";
import LG from "@/assets/json/469024.json";
import BS from "@/assets/json/469025.json";
import CJ from "@/assets/json/469026.json";
import LD from "@/assets/json/469027.json";
import LS from "@/assets/json/469028.json";
import BT from "@/assets/json/469029.json";
import QZ from "@/assets/json/469030.json";

// import { getMapDataNew } from "@/assets/json/469030.json";


export default {
  name: "echartsMapXun",
  data() {
    return {
      mapsDatas: [],
      // date: [],
      date: "",
      tempdate: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      clickNum: 1,
      demoImg: require("@/assets/img/mapBg.jpg"),
      imgSrc: null,
      myChart: null,
      value: "海南省",
      geoJson: {
        features: [],
      },
      parentInfo: [
        {
          cityName: "海南省",
          code: 4600000,
        },
      ],
      mapData: [], //地图数据
    };
  },
  created() {
    // let startTime = parseTime((new Date()).getTime() - 8 * 24 * 3600 * 1000, '{y}-{m}-{d}');
    // let endTime = parseTime((new Date()).getTime() - 1 * 24 * 3600 * 1000, '{y}-{m}-{d}');
    this.date = "";
    this.tempdate = this.getMondayAndSunday();
    // console.log("endTime--->", endTime);
    this.getMaps("");
  },
  mounted() {
    // this.initMap(100000);
  },
  methods: {
        // 获取周一和周日
        getMondayAndSunday() {
      const now = new Date();
      const dayOfWeek = now.getDay();
      const monday = new Date(now);
      const sunday = new Date(now);

      monday.setDate(now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));
      sunday.setDate(now.getDate() + (7 - dayOfWeek));

      function formatDate(date) {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const day = date.getDate().toString().padStart(2, "0");
        return `${year}-${month}-${day}`;
      }

      return [formatDate(monday), formatDate(sunday)];
    },
    //获取地图数据
    getMaps() {
      // getMapDataNew({
      //   cityCode: city ? city : undefined,
      //   beginDate: this.tempdate[0] ? this.tempdate[0] : undefined,
      //   endDate: this.tempdate[1] ? this.tempdate[1] : undefined,
      // })
      //   .then((res) => {
      //     this.mapsDatas = res.data ? res.data : [];
      //     // console.log("getMapDataNew-->", this.mapsDatas);
      //   })
      //   .then(() => {
          this.initMap(100000);
        // });
    },

    //初始化
    initEcharts(mapData) {
      this.myChart = echarts.init(this.$refs.sctterMap);
      let map = "Map";
      echarts.registerMap(map, this.geoJson); //注册
      // console.log(this.geoJson);
      let options = {
        tooltip: {
          trigger: "item",
          formatter: (p) => {
            // console.log("p--->", p);
            let val = p.value;
           
            if (!val) {
              val = 0;
            }
            if (val == 0) {
              // return p.name + ":" + '暂无数据';
              return `及时率：0%`;
            }
            // let txtCon = p.name + ':' + val + '分';
            // return `
            //   <div class="cbox">
            //     <div>巡查次数：${p.data.xunNum?p.data.xunNum:0}</div>
            //     <div>主体及时率：${p.data.zhuJ?p.data.zhuJ:0}</div>
            //     <div>主体合格率：${p.data.zhuH?p.data.zhuH:0}</div>
            //     <div>评分：${val} 分</div>
            //   </div>
            // `;
            return `
              <div class="cbox">
                <div>及时率：${val ? val : 0}% </div>
              </div>
            `;
          },
        },
        geo: {
          map: map,
          zoom: 1.1,
          // roam: scale,
          itemStyle: {
            normal: {
              // areaColor: '',
              areaColor: {
                type: "pattern",
                image: this.imgSrc,
                repeat: "repeat",
              },
              shadowColor: "rgba(25,103,131,1)",
              shadowOffsetX: 5,
              shadowBlur: 5,
              shadowOffsetY: 5,
              borderWidth: 5,
              borderColor: "rgba(25,103,131,0.5)",
            },
          },
        },
        visualMap: {
          left: "11.3%",
          top: "15%",
          textStyle: {
            color: "white",
          },
          pieces: [
            {
              gte: 90,
              lte: 100,
              label: "优秀：及时率 90-100%",
              color: "rgba(0,234,83,0.5)",
              //
            },
            {
              gte: 80,
              lte: 89,
              label: "良好：及时率 80-89%",
              color: "rgba(41,163,255,0.5)",
            },
            {
              gte: 70,
              lte: 79,
              label: "合格：及时率 70-79%",
              color: "rgba(246,171,99,0.5)",
            },
            {
              gte: 0.001,
              lt: 70,
              label: "一般：及时率 70%以下",
              color: "rgba(238,54,76,0.5)",
            },
            // {
            //   value: 0,
            //   label: ' ',
            //   color: 'rgba(10,243,186,0.1)',
            //
            // },
          ],
        },
        series: [
          {
            name: "地图",
            type: "map",
            map: map,
            // roam: 'scale', //是否可缩放
            zoom: 1.1, //缩放比例
            data: mapData,
            label: {
              normal: {
                show: true,
                backgroundColor: "rgba(14,40,74,0.7)",
                borderRadius: 12,
                borderWidth: 3,
                padding: 10,
                color: "white", //省份标签字体颜色
                formatter: (p) => {
                  switch (p.name) {
                    case "内蒙古自治区":
                      p.name = "内蒙古";
                      break;
                    case "西藏自治区":
                      p.name = "西藏";
                      break;
                    case "新疆维吾尔自治区":
                      p.name = "新疆";
                      break;
                    case "宁夏回族自治区":
                      p.name = "宁夏";
                      break;
                    case "广西壮族自治区":
                      p.name = "广西";
                      break;
                    case "香港特别行政区":
                      p.name = "香港";
                      break;
                    case "澳门特别行政区":
                      p.name = "澳门";
                      break;
                    default:
                      break;
                  }
                  let countTwo =  0;
                  if (p.name != "南海诸岛") {
                    return (
                      p.name + "\n" + "\n巡查次数：" + countTwo + " " + "次"
                    );
                  }
                  // return p.name;
                },
              },
              emphasis: {
                show: true,
                color: "white",
              },
            },
            itemStyle: {
              normal: {
                areaColor: "rgba(4,222,225,1)",
                // areaColor: 'red',
                borderColor: "rgba(59,255,232,0.2)",
                borderWidth: 0,
              },
              emphasis: {
                areaColor: "#8dd7fc",
                borderWidth: 1.1,
                shadowBlur: 25,
              },
            },
          },
        ],
      };
      this.myChart.setOption(options);
      // console.log("setOption", options);
      let that = this;
      this.myChart.off("click");
      this.myChart.on("click", (params) => {
        // console.log("~~~", params.data.value, params.data.countTwo, params);

        // 数据大于0
        if (params.data.value > 0 || params.data.countTwo > 0) {
          if (
            that.parentInfo[that.parentInfo.length - 1].code ==
            params.data.cityCode
          ) {
            return;
          }
          if (that.parentInfo.length === 1) {
            setTimeout(() => {
              that.parentInfo.push({
                cityName: params?.data?.name,
                code: params?.data?.cityCode,
              });
            }, 500);
          }
          let data = params.data;
          that.value = data.name;
          that.change(data.cityCode);
        } else {
          this.$notify({
            type: "warning",
            message: "该地区暂无数据",
            duration: 2000,
          });
        }
      });
    },

    //初始化地图
    initMap(mapCode) {
      this.imgSrc = document.createElement("img");
      this.imgSrc.src = this.demoImg;
      let that = this;
      // var map = new AMap.Map('maps',{
      //   zoom: 4,
      // })
      /* eslint-disable no-undef */
      AMapUI.loadUI(["geo/DistrictExplorer"], function (DistrictExplorer) {
        //启动页面
        initPage(DistrictExplorer);
      });

      function initPage(DistrictExplorer) {
        //创建一个实例
        var districtExplorer = new DistrictExplorer();
        var adcode = mapCode;

        districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
          let Json = areaNode.getSubFeatures();
          // console.log(adcode);
          if (adcode === 100000) {
            that.geoJson.features = HN.features;
            that.mapData = [
              { name: "南海诸岛", value: 0, cityCode: undefined },
              { name: "海口市", value: 20, cityCode: 460100 },
              // {name: "三亚市", value: 93, cityCode: 460200,xunNum:233,zhuJ:'92%',zhuH:'97%'},
              { name: "三亚市", value: 30, cityCode: 460200 },
              { name: "儋州市", value: 50, cityCode: 460400 },
              { name: "五指山市", value: 60, cityCode: 469001 },
              { name: "琼海市", value: 80, cityCode: 469002 },
              { name: "文昌市", value: 90, cityCode: 469005 },
              { name: "万宁市", value: 0, cityCode: 469006 },
              { name: "东方市", value: 0, cityCode: 469007 },
              { name: "定安县", value: 0, cityCode: 469021 },
              { name: "屯昌县", value: 0, cityCode: 469022 },
              { name: "澄迈县", value: 0, cityCode: 469023 },
              { name: "临高县", value: 0, cityCode: 469024 },
              { name: "白沙黎族自治县", value: 0, cityCode: 469025 },
              { name: "昌江黎族自治县", value: 0, cityCode: 469026 },
              { name: "乐东黎族自治县", value: 0, cityCode: 469027 },
              { name: "陵水黎族自治县", value: 0, cityCode: 469028 },
              { name: "保亭黎族苗族自治县", value: 0, cityCode: 469029 },
              { name: "琼中黎族苗族自治县", value: 0, cityCode: 469030 },
            ];

            // }else if (adcode === 460400) {
            //   that.geoJson.features = DZ.features;
            // }else if (adcode === 469001) {
            //   that.geoJson.features = WZS.features;
            //   that.mapData = [
            //     {name: "南圣镇", value: 0, cityCode: undefined},
            //     {name: "番阳镇", value: 90, cityCode: undefined},
            //     {name: "毛道乡", value: 0, cityCode: undefined},
            //     {name: "通什镇", value: 0, cityCode: undefined},
            //     {name: "国营畅好农场", value: 0, cityCode: undefined},
            //     {name: "毛阳镇", value: 0, cityCode: undefined},
            //     {name: "水满乡", value: 0, cityCode: undefined},
            //     {name: "畅好乡", value: 0, cityCode: undefined},
            //   ];
            // }else if (adcode === 469028) {
            //   that.geoJson.features = LS.features;
            //   // that.mapData = [ {name: "陵水黎族自治县", value: 100, cityCode: 469028}]
            //   that.mapData = [
            //     {name: "文罗镇", value: 0, cityCode: undefined},
            //     {name: "英州镇", value: 30, cityCode: undefined,xunNum:233,zhuJ:'30%',zhuH:'42%'},
            //     {name: "隆广镇", value: 0, cityCode: undefined},
            //     {name: "国营南平农场", value: 0, cityCode: undefined},
            //     {name: "本号镇", value: 0, cityCode: undefined},
            //     {name: "椰林镇", value: 0, cityCode: undefined},
            //     {name: "新村镇", value: 0, cityCode: undefined},
            //     {name: "国营岭门农场", value: 0, cityCode: undefined},
            //     {name: "国营吊罗山林业公司", value: 0, cityCode: undefined},
            //     {name: "三才镇", value: 0, cityCode: undefined},
            //     {name: "光坡镇", value: 0, cityCode: undefined},
            //     {name: "提蒙乡", value: 0, cityCode: undefined},
            //     {name: "群英乡", value: 0, cityCode: undefined},
            //     {name: "黎安镇", value: 0, cityCode: undefined},
            //   ];
            // }else {
            //   that.geoJson.features = Json;
            //   console.log(Json);
            // }

            for (let i = 0; i < that.mapData.length; i++) {
              for (let j = 0; j < that.mapsDatas.length; j++) {
                if (that.mapData[i].cityCode == that.mapsDatas[j].code) {
                  that.mapData[i].value = that.mapsDatas[j].countRate;
                  that.mapData[i].countTwo = that.mapsDatas[j].countTwo;
                  //countOne countRate
                  // that.mapData[i].xunNum = that.mapsDatas[j].xunNum?that.mapsDatas[j].xunNum:0;
                  // that.mapData[i].zhuJ = that.mapsDatas[j].zhuJ?that.mapsDatas[j].zhuJ:0;
                  // that.mapData[i].zhuH = that.mapsDatas[j].zhuH?that.mapsDatas[j].zhuH:0;
                }
              }
            }
          } else if (adcode === 460400) {
            that.geoJson.features = DZ.features;
          } else if (adcode === 469001) {
            that.geoJson.features = WZS.features;
          } else if (adcode === 469028) {
            that.geoJson.features = LS.features;
          } else if (adcode === 469002) {
            that.geoJson.features = QH.features;
          } else if (adcode === 469005) {
            that.geoJson.features = WC.features;
          } else if (adcode === 469006) {
            that.geoJson.features = WN.features;
          } else if (adcode === 469007) {
            that.geoJson.features = DF.features;
          } else if (adcode === 469021) {
            that.geoJson.features = DA.features;
          } else if (adcode === 469022) {
            that.geoJson.features = TC.features;
          } else if (adcode === 469023) {
            that.geoJson.features = CM.features;
          } else if (adcode === 469024) {
            that.geoJson.features = LG.features;
          } else if (adcode === 469025) {
            that.geoJson.features = BS.features;
          } else if (adcode === 469026) {
            that.geoJson.features = CJ.features;
          } else if (adcode === 469027) {
            that.geoJson.features = LD.features;
          } else if (adcode === 469029) {
            that.geoJson.features = BT.features;
          } else if (adcode === 469030) {
            that.geoJson.features = QZ.features;
          } else {
            that.geoJson.features = Json;
            // console.log(Json);
          }

          if (error) {
            console.error(error);
            return;
          }
          //绘制载入的区划节点
          that.initEcharts(that.mapData);
        });
      }
    },

    // 点击地图
    change(value) {
      if (this.parentInfo.length == 2) {
        this.$notify({
          type: "warning",
          message: "已到最小的查看等级区/县",
          duration: 2000,
        });
        return;
      }
      // if (value === 460200) {
      //   this.mapData = [
      //     {name: "崖州区", value: 0, cityCode: 460205},
      //     {name: "天涯区", value: 0, cityCode: 460204},
      //     {name: "吉阳区", value: 0, cityCode: 460203},
      //     {name: "海棠区", value: 93, cityCode: 460202,xunNum:233,zhuJ:'92%',zhuH:'97%'},
      //   ];
      // }
      // else if (value == 469028) {
      //   this.mapData = [
      //     {name: "陵水黎族自治县", value: 80, cityCode: 460205},
      //   ];
      // }

      if (value === 460100) {
        // getMapDataNew({
        //   cityCode: value ? value : undefined,
        //   beginDate: this.tempdate[0] ? this.tempdate[0] : undefined,
        //   endDate: this.tempdate[1] ? this.tempdate[1] : undefined,
        // })
        //   .then((res) => {
        //     this.otherCity = res?.data;
        //   })
        //   .then(() => {
        //     this.mapData = [
        //       { name: "秀英区", value: 0, cityCode: 460105 },
        //       { name: "龙华区", value: 0, cityCode: 460106 },
        //       { name: "琼山区", value: 0, cityCode: 460107 },
        //       { name: "美兰区", value: 0, cityCode: 460108 },
        //     ];
        //     for (let i = 0; i < this.mapData.length; i++) {
        //       for (let j = 0; j < this.otherCity.length; j++) {
        //         if (this.mapData[i].cityCode == this.otherCity[j].code) {
        //           this.mapData[i].value = this.otherCity[j].countRate;
        //           this.mapData[i].countTwo = this.otherCity[j].countTwo;
        //           //countOne countRate
        //           // that.mapData[i].xunNum = that.mapsDatas[j].xunNum?that.mapsDatas[j].xunNum:0;
        //           // that.mapData[i].zhuJ = that.mapsDatas[j].zhuJ?that.mapsDatas[j].zhuJ:0;
        //           // that.mapData[i].zhuH = that.mapsDatas[j].zhuH?that.mapsDatas[j].zhuH:0;
        //         }

        //         // if (this.mapData[i].cityCode == this.otherCity[j].areaCode) {
        //         //   this.mapData[i].value = this.otherCity[j].count;
        //         // }
        //       }
        //     }
        //     this.initEcharts(this.mapData);
        //   });
      }
      if (value === 460200) {
        // getMapDataNew({
        //   cityCode: value ? value : undefined,
        //   beginDate: this.tempdate[0] ? this.tempdate[0] : undefined,
        //   endDate: this.tempdate[1] ? this.tempdate[1] : undefined,
        // })
        //   .then((res) => {
        //     this.otherCity = res?.data;
        //   })
        //   .then(() => {
        //     this.mapData = [
        //       { name: "崖州区", value: 0, cityCode: 460205 },
        //       { name: "天涯区", value: 0, cityCode: 460204 },
        //       { name: "吉阳区", value: 0, cityCode: 460203 },
        //       { name: "海棠区", value: 0, cityCode: 460202 },
        //     ];
        //     for (let i = 0; i < this.mapData.length; i++) {
        //       for (let j = 0; j < this.otherCity.length; j++) {
        //         if (this.mapData[i].cityCode == this.otherCity[j].areaCode) {
        //           this.mapData[i].value = this.otherCity[j].count;
        //         }
        //       }
        //     }
        //     this.initEcharts(this.mapData);
        //   });
      }

      if (value !== 100000) {
        this.$emit("echarts", value);
      } else {
        this.$emit("echarts", "");
      }
      this.initMap(value);
    },

    //点击海南省
    chooseArea(val) {
      // console.log("chooseArea-->", val);
      if (val.code === 4600000) {
        this.parentInfo = [{ cityName: "海南省", code: 4600000 }];
        this.change(100000);
      }
    },

    // 开始日期
    getStartDateOfWeek(week) {
      const date = new Date(week);
      const dayOfWeek = date.getDay() || 7; // 使用0表示周日
      const startOffset = 2 - dayOfWeek; // 根据周日是一周的开始来调整
      date.setDate(date.getDate() + startOffset);
      return date.toISOString().split("T")[0];
    },
    // 结束日期
    getEndDateOfWeek(week) {
      const date = new Date(week);
      const dayOfWeek = date.getDay() || 8;
      const endOffset = 8 - dayOfWeek; // 根据周日是一周的开始来调整
      date.setDate(date.getDate() + endOffset);
      return date.toISOString().split("T")[0];
    },

  },
};
</script>
<style scoped lang="scss">
.mapChoose {
  position: absolute;
  left: 30%;
  top: 8%;
  color: #eee;
  z-index: 9999;
  .title {
    font-size: 14px;
    padding: 5px;
    border-top: 1px solid rgba(147, 235, 248, 0.8);
    border-bottom: 1px solid rgba(147, 235, 248, 0.8);
    cursor: pointer;
  }

  .icon {
    font-family: "simsun";
    font-size: 25px;
    margin: 0 11px;
  }
}
.textChoose {
  font-size: 0.18rem;
  position: absolute;
  left: 30%;
  top: 2%;
  .text {
    font-weight: bolder;
    background: linear-gradient(#fefeff, #68bcee); /* 从左到右渐变红黄 */
    -webkit-background-clip: text; /* Safari需要添加此属性才能正常显示背景渐变效果 */
    color: transparent; /* 将文本设置为透明，只保留背景渐变效果 */
  }
  ::v-deep .el-input__inner {
    background: transparent;
    color: #fff;
    height: 35px;
    border: 1px solid #00ffe4;
  }
  ::v-deep .el-range-input {
    background: transparent;
    color: #fff;
  }
  ::v-deep .el-input__icon,
  ::v-deep .el-range-separator {
    margin-top: -4px;
    color: #fff;
  }
}
</style>
